<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">付款单详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <!-- <el-col class="mr20 width100" v-if="detailData.status == '1'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="edit()"
                        v-hasPermi="['system:billsPayment:update']"
                    >编辑</el-button>
                </el-col> -->
                <el-col class="mr20 width100" v-if="detailData.status == '1'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="confirm()"
                        v-hasPermi="['system:billsPayment:audit']"
                    >确认付款</el-button>
                </el-col>
                <!-- <el-col class="mr20 width100" v-if="detailData.status == '2'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="cancel()"
                        v-hasPermi="['system:billsPayment:audit']"
                    >撤消付款</el-button>
                </el-col> -->
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : detailData.status == '1'}">待付款</span>
                        <span :class="{ 'active' : detailData.status == '2'}">已付款</span>
                        <span :class="{ 'active' : detailData.status == '3'}">部分核销</span>
                        <span :class="{ 'active' : detailData.status == '4'}">已核销</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>单据编号：</span>{{ detailData.paymentCode ?  detailData.paymentCode : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>供应商：</span>{{ detailData.supplierName ?  detailData.supplierName : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>付款方式：</span>{{ detailData.paymentMethod == '1' ? '银行' :  detailData.paymentMethod == '2' ? '现金' : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>付款类型：</span>{{ detailData.paymentType == '1' ? '采购货款' : detailData.paymentType == '2' ? '采购退货' : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item" v-if="detailData.paymentMethod == '1'">
                <el-col :span="8">
                    <span>付款银行：</span>{{ detailData.paymentBank ?  detailData.paymentBank : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>付款账号：</span>{{ detailData.paymentAccount ?  detailData.paymentAccount : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>采购订单编号：</span>{{ detailData.orderCode ?  detailData.orderCode : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>订单金额：</span>{{ detailData.orderMoney ?  detailData.orderMoney : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>应付金额：</span>{{ detailData.planMoney ?  detailData.planMoney : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>实付金额（元）：</span>
                    <template v-if="detailData.status !== '2'">
                        <el-input v-model="detailData.money" placeholder="" @input="inputMoney" />
                    </template>
                    <template v-else>
                        {{ detailData.money ?  detailData.money : '暂无'}}
                    </template>
                </el-col>
                <el-col :span="8">
                    <span>金额大写：</span>{{ detailData.amountOfCapital ?  detailData.amountOfCapital : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { billsPaymentDetail, billsPaymentAudit, billsPaymentSplitOrder } from "@/api/system/billsPayment/billsPayment"
export default {
    name: "detail",
    data() {
        return {
            id: '',
            detailData: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        // 获取详细信息
        getDetail(){
            billsPaymentDetail(this.$route.query.id).then(res => {
                if(res.code == 200){
                    if(res.data.money == 0){
                        res.data.money = ''
                    }
                    this.detailData = res.data
                }
            })
        },
        // 金额验证
        inputMoney(e){
            if(/^(([1-9]{1}\d*)|(0{1}))((.\d{0,2})?)$/.test(e) == false){
                this.$modal.msgError('请输入正确的实付金额！')
                this.detailData.money = ''
                this.detailData.amountOfCapital = ''
                return false
            }else{
                if(e == '0'){
                    this.$modal.msgError('实付金额必须大于0!')
                    this.detailData.money = ''
                    this.detailData.amountOfCapital = ''
                }else{
                    // 金额转换大写
                    this.detailData.amountOfCapital = this.numberToChinese(e)
                }
            }
        },
        // 编辑
        // edit(){
        //     this.$tab.closeOpenPage({ path: "/billsPayment/edit", query:{ id: this.id } })
        // },
        // 确认收款
        confirm(){
            if(this.detailData.money == ''){
                this.$modal.msgError('实付金额不能为空，请编辑！')
            }else{
                if(Number(this.detailData.money) == this.detailData.planMoney){
                    billsPaymentAudit({paymentId: this.id, status: '2', money: this.detailData.money, amountOfCapital: this.detailData.amountOfCapital}).then(res => {
                        if(res.code == 200){
                            this.$modal.msgSuccess("操作成功")
                            this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsPayment/list" })
                        }
                    })
                }else if(Number(this.detailData.money) < this.detailData.planMoney){
                    this.$modal.confirm('是否拆单？', '拆单').then(() => {
                        // 拆单
                        billsPaymentSplitOrder({paymentId: this.id, status: '2', money: this.detailData.money, amountOfCapital: this.detailData.amountOfCapital}).then(res => {
                            if(res.code == 200){
                                this.$modal.msgSuccess("操作成功")
                                this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsPayment/list" })
                            }
                        })
                    }).catch(action => {
                        if(action == 'cancel'){
                            // 确认出库
                            billsPaymentAudit({paymentId: this.id, status: '2', money: this.detailData.money, amountOfCapital: this.detailData.amountOfCapital}).then(res => {
                                if(res.code == 200){
                                    this.$modal.msgSuccess("操作成功")
                                    this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsPayment/list" })
                                }
                            })
                        }
                    })
                }else{
                    this.$modal.msgError('实付金额不能大于应付金额!')
                }
            }
        },
        // 撤销收款
        // cancel(){
        //     billsPaymentAudit({paymentId: this.id, status: '1'}).then(res => {
        //         if(res.code == 200){
        //             this.$modal.msgSuccess("操作成功")
        //             this.$tab.closeOpenPage({ path: "/billsPayment/list" })
        //         }
        //     })
        // }
    }
}
</script>
